<template>
	<!-- 收支明细 -->
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"></view>  
		<!-- #endif -->
		<navbar title="收支明细" />
		<view class="status">
			<view class="status_text" :class="{'active':curType==index}" @click="changeType(item,index)" v-for="(item,index) in typeList" :key="index">
				<text>{{item}}</text>
				<view class="line" v-if="curType==index"></view>
			</view>
		</view>
		<noData v-if="recordList.length===0" />
		<view class="record" v-for="(itemr,indexr) in recordList" :key="indexr" v-else>
			<view class="record_top" v-if="curType == 0">
				<view class="record_top_desc">{{itemr.status | statustext}} 获得</view>
				<view class="record_top_money">+￥{{itemr.price}}</view>
			</view>
			<view class="record_top" v-else>
				<view class="record_top_desc">{{itemr.status | statustext}} 支出</view>
				<view class="record_top_money">-￥{{itemr.price}}</view>
			</view>
			<view class="record_time">{{itemr.create_time}}</view>
		</view>
		<view class="walletbot">
			<view class="walletbot_money">可用心愿币：<text>￥{{balance}}</text></view>
			<view class="walletbot_btn" @click="toUse">去使用</view>
		</view>
		<!-- 加载更多 -->
		<pullDownRefresh :status="loading" v-if="recordList.length>0" />
	</view>
</template>

<script>
	import pullDownRefresh from '@/components/pullDownRefresh'
	export default {
		components:{
			pullDownRefresh
		},
		data() {
			return {
				balance:'0',//心愿币
				typeList:['收入','支出'],//明细类型列表
				curType:0,//当前明细类型索引 1收入 2支出
				recordList:[],//收入支出明细
				loading:0,//更多明细
				page:1
			}
		},
		filters: {
			statustext(value) {
				switch(parseInt(value)){
					case 1:
						return '盲盒抽中预言商品'
					case 2:
						return '成为预言家'
					case 3:
						return '回收商品'
					case 4:
						return '佣金提现'
					case 5:
						return '抽取盲盒使用心愿币'
					case 6:
						return '购买商品使用心愿币'
					case 7:
						return '购买积分商品使用心愿币'
					case 8:
						return '充值'
					case 9:
						return '吸欧气'
					case 10:
						return '退款'
					case 11:
						return '成就盒子'
					default:
						break
				}
			}
		},
		onLoad(options) {
			console.log(options);
			this.curType = options.type;
			this.balance = options.balance;
			this.getMywalletlis();
		},
		onReachBottom() {
			this.page++;
			this.getMywalletlis();
		},
		methods: {
			//获取钱包收支明细
			getMywalletlis(){
				this.loading = 1;
				this.$api.mywalletlis({
					type:parseInt(this.curType)+1,
					offset:this.page
				}).then(res=>{
					if(res.length>0){
						this.loading = 0;
						this.recordList = this.recordList.concat(res);
					}else{
						this.loading = 3;
						// uni.showToast({
						// 	title:'没有更多了~',
						// 	icon:'none'
						// })
					}
				})
			},
			//切换明细类型
			changeType(k,i){
				this.curType = i;
				this.page = 1;
				this.recordList = [];
				this.getMywalletlis();
			},
			//跳转商城
			toUse(){
				uni.switchTab({
					url:'/pages/mall/mall'
				})
			}
		},
	}
</script>

<style lang="scss">
page{
	padding: calc(var(--status-bar-height) + 130rpx) 0 100rpx;
}
.status{
	position: fixed;
	left: 0;
	top: var(--status-bar-height);
	z-index: 999;
	width: 750rpx;
	height: 100rpx;
	background-color: #FFFFFF;
	padding: 30rpx 155rpx 37rpx;
	@include between;
	
	&_text{
		font-weight: 400;
		color: #666666;
		font-size: 28rpx;
		position: relative;
	}
	.active{
		font-weight: bold;
		color: $main_color;
	}
	.line{
		width: 70rpx;
		height: 4rpx;
		background-color: $main_color;
		position: absolute;
		bottom: -4rpx;
		left: 50%;
		transform: translateX(-50%);
	}
}
.record{
	width: 690rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	padding: 30rpx;
	margin: 0 30rpx 26rpx;
	
	&_top{
		@include between;
		
		&_desc{
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
		}
		&_money{
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FF0000;
		}
	}
	&_time{
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
		margin-top: 25rpx;
	}
}
.walletbot{
	width: 750rpx;
	height: 100rpx;
	background: #FFFFFF;
	padding: 15rpx 30rpx;
	@include between;
	position: fixed;
	bottom: 0;
	z-index: 999;
	
	&_money{
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		
		text{
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FF0000;
		}
	}
	&_btn{
		width: 250rpx;
		height: 70rpx;
		background: linear-gradient(180deg, #FF8583 0%, #FF660A 100%);
		border-radius: 35rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		@include center;
		margin-left: 73rpx;
	}
}
</style>
